<template>
  <div class="app-container">
    <QueryForm v-model="form" :shopList="shopList" @search="getTeamList" />
    <TeamTable :list="teamList" :shopList="shopList"/>
    <BasePagination
      v-model="page.page"
      :total="totalCount"
      @change="pageOnChange"
    />
  </div>
</template>
<script>
import { getTeamList } from '@/api/team/index'
import { getAllShopList } from '@/api/shop/index'
import QueryForm from './_components/QueryForm.vue'
import TeamTable from './_components/TeamTable.vue'
import {received} from '@/utils/util'
export default {
  name: 'TeamManage',
  components: { QueryForm, TeamTable },
  data() {
    return {
      form: {
        shopId: ''
      },
      teamList: [],
      shopList: [],
      totalCount: 0,
      page: {
        page: 1,
        size: 100
      }
    }
  },
  created() {
    received('team.add.succes', this.getTeamList)
    this.getAllShopList()
    this.getTeamList()
  },
  methods: {
    async getTeamList() {
      this.showAppLoading()
      const params = {
        paramObject: this.form,
        ...this.page
      }
      const res = await getTeamList(params)
      this.hideAppLoading()
      if (!res.result) return
      this.teamList = res.data.dataList
      this.totalCount = res.data.totalCount
      this.page.page = res.data.page
    },
    async getAllShopList() {
      const res = await getAllShopList()
      if (!res.result) return
      this.shopList = res.data.map(item => {
        return {
          value: item.id,
          label: item.name
        }
      })
    },

    pageOnChange(row) {
      this.page.page = row.page;
      if (row.pageSize) {
        this.page.size = row.pageSize;
      }
      this.getTeamList()
    },
  }
}
</script>
